<template>
    <view class="info">
        <block v-if="!boxHide">
        <view class="visit_list" >
				<block v-for="(item,index) in info3.list">
					<view class="visit_item" :key="index">
						<!-- <image class="visit_item_status" :src="'/static/images/laber_icon' + (Number(item.status) + 1)  + '.png'" @tap="visitDeal(0,item)"></image> -->
						<image class="visit_item_status" :src="'/static/images/laber_icon' + (Number(item.status) + 1)  + '.png'" @tap="visitSign(item.id,item.status,item.appointment_date)"></image>
						<view class="visit_item_content_box" @click.stop="go('visitDetail',item.id)">
							<image class="visit_item_content_bg"></image>
							<view class="visit_item_content">
								<view class="visit_item_content_title">
									<view>{{item.title}}</view>
									<view>{{item.type}}</view>
									<view v-if="item.status!=1" @click.stop="visitSign(item.id,item.status,item.appointment_date)" >签到</view>
									<!-- <image src="/static/images/prompt.png" mode="" ></image> -->
								</view>
								<view class="visit_item_content_text">
									<view class="">{{item.content}}</view>
								</view>
								<view class="visit_item_content_time">
									<view v-if="item.status==1 && item.sign_time > item.appointment_date" style="color:red">{{item.appointment_date}}  签到超时</view>
									<view v-else>{{item.appointment_date}}</view>
									<view class="visit_item_content_time_icon">
										<image src="/static/images/visit_icon1.png" @click.stop="visitDeal(1,item)" v-if="item.status == 0&&checkPermission([10008])"></image>
										<image src="/static/images/visit_icon2.png" @click.stop="visitDeal(2,item)"></image>
										<!-- <image src="/static/images/visit_icon3.png" @tap="visitDeal(3,item)"></image> -->
										<image src="/static/images/visit_icon4.png" @click.stop="visitDeal(4,item,index)" v-if="checkPermission([10003])"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block> 
		</view>
		<view class="bottom_btn">
			<view class="bottom_btn_list">
				<!-- <view>批量添加拜访</view> -->
				<view @click.stop="visitDeal(5,{status:1})" v-if="checkPermission([10007])">添加拜访</view>
			</view>
		</view>
        </block>
		<Loading ref="load"></Loading>

    </view>
</template>
<script>
export default {
    data() {
        return {
			info3: {
				list: [],
                page: 1,
				merchantId:0, // 客户编号
				customerAddress:"", // 客户地址
				boxHide: true
			},
        }
    },
    onLoad(options){
        console.log("参数----》》》》",options);
		this.merchantId = options.id;
		this.customerAddress = options.address;
        //this.getData(1)
	},
	onShow() {
		this.getData(1)
	},
	onHide() {
		this.boxHide = this.$hideBox;
	},
    methods:{
		go(obj, kid) { //页面跳转
				if(obj == 'visitDetail'){ 
					uni.navigateTo({
						url: `/pages/client/info/visitDetail/visitDetail?id=${kid}`
					})
					return false;
				}
				
			},
			getData(type) {

					this.$refs.load.initLoading({loadType: 1}).then(res => {
						this.boxHide = false;
						if (type == 1) {
							this.info3.list = [];
							this.info3.page = 1;
							this.info3.loading = true;
							this.$app.globalData.upData.clientInfo[this.barNum] = false;
						}
						// 默认参数格式
						let upJson = {customer_id:this.merchantId,page : this.info3.page,user_id: uni.getStorageSync("userId")}
						
						// 请求数据，详细看api.js文档
						this.$api.getClientDetails(upJson, 3).then(res => {

								var getNumWithZero = num => {
									return num < 10 ? ('0' + num) : num;
								}
								
								let DATE = new Date();
								let year = DATE.getFullYear();
								let month = getNumWithZero(DATE.getMonth() + 1);
								let date = getNumWithZero(DATE.getDate());
								
								let hour = getNumWithZero(DATE.getHours());
								let minutes = getNumWithZero(DATE.getMinutes());
								let second = getNumWithZero(DATE.getSeconds());
								
								let currentTime = new Date(`${year}/${month}/${date} ${hour}:${minutes}:${second}`).getTime();
								let lastTime = new Date(res.last_time.replace(/-/g, '/')).getTime();
								if(currentTime > lastTime) {
									this.visitTime = '暂无'
								} else {
									this.visitTime = res.last_time
                                }
                            
                            let list = res.data;
							this.$refs.load.getLoadingData({oldData: this.info3.list,newData: list}).then(res => {
								this.info3.list = res.list;
								this.info3.loading = res.loading
								this.info3.page++;
							});
						})
					})
			},
			visitDeal(index, item, num) { //拜访操作
				if (index == 3) {
					this.$api.prompt("开发中~");
					return;
					uni.navigateTo({
						url: "/pages/client/info/visitSend/visitSend?merchantId=" + this.merchantId
					})
				} else if (index == 4) {
					let that = this;
					uni.showModal({
						title: "温馨提示",
						content: "是否删除该拜访记录",
						success(res) {
							if (res.confirm) {
								that.$api.addClientVisit({
									id: item.id
								}, index).then(res => {
									
									that.info3.list.splice(num, 1);
									that.$api.prompt("删除成功")
								})
							}
						}
					})
				} else {
					if (item.status == 2 && index == 0) return;
					console.log(item)
					uni.navigateTo({
						url: "/pages/client/info/visitAdd/visitAdd?type=" + index + "&merchantId=" + this.merchantId + "&visitId=" + item.id
					})
				}
			},
			visitSign(id,status,appointmentDate){ // 拜访签到
				console.log("地址-----》》》》",this.customerAddress);
				if(status==1){ // 已签到

					this.$api.prompt("已拜访签到");

				}else{
					let address = this.customerAddress;
					uni.showModal({
						title: "拜访签到",
						success (res) {
							if (res.confirm) {
								uni.navigateTo({
									url:"/pages/client/info/visitSign/visitSign?id="+id+"&address="+address+"&appointmentDate="+appointmentDate
								})
							} else if (res.cancel) {
							console.log('用户点击取消')
							
							}
						}
					})
				}
			}

    }
}
</script>
<style>
.info {
		padding-bottom: 90upx;
	}

	.info_top {
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 998;
	}

	.info_content {
		padding-top: 210upx;
		width: 100%;
	}

	.info_content1 {
		padding: 20upx 0;
		background: #FFFFFF;
	}

	.info_equipment {
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;
		font-size: 30upx;
		color: #333333;
		background: #FFFFFF;
	}

	.info_equipment_title {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 80upx;
		justify-content: space-between;
		border-bottom: 2rpx solid #EEEEEE;
	}

	.info_equipment_item_box_box {
		padding-top: 20upx;
	}

	.info_equipment_item_box {
		padding-bottom: 20upx;
	}

	.info_equipment_item {
		width: 100%;
		padding: 0 30upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 30upx;
		color: #333333;
		background: #F8F8F8;
		height: 130upx;
		border-radius: 8upx;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.info_equipment_item:first-child {
		margin-top: 0;
	}

	.info_equipment_item_text view:nth-child(2) {
		font-size: 28upx;
		color: #9BA7B7;
		margin-top: 10upx;
	}

	.work_item {
		width: 100%;
		padding: 30upx;
		box-sizing: border-box;
		font-size: 28upx;
		border-bottom: 2upx solid #EEEEEE;
		background: #FFFFFF;
	}

	.work_item_name {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 40upx;
		font-size: 30upx;
		color: #333333;
		justify-content: space-between;
	}
	.work_item_name .left {
		display: flex;
		align-items: center;
	}
	.work_item_name .left view:nth-child(2) {
		line-height: 28upx;
		padding: 0 12upx;
		font-size: 20upx;
		color: #049BFF;
		border: 2upx solid #049BFF;
		margin-left: 20upx;
		border-radius: 4upx;
	}

	.work_item_id {
		color: #666666;
		line-height: 60upx;
	}

	.work_item_text {
		height: 60upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #999;
	}

	.work_item_text text:nth-child(2) {
		margin-left: 20upx;
	}

	.visit_time {
		width: 100%;
		height: 75upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 26upx;
		color: #049BFF;
		background: #DEEEFB;
		line-height: 75upx;
		position: absolute;
		z-index: 99;
	}

	.visit_time image {
		width: 28upx;
		height: 28upx;
		margin-right: 10upx;
	}

	.box_title {
		margin: 30upx;
	}
	
	.visit_list{margin-top: 20upx;padding: 0rpx 10rpx;}
	.visit_item {
		width: 670upx;
		height: 210upx;
		border-left: 2upx dashed #9BA7B7;
		margin-left: 30upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.visit_item_status {
		width: 44upx;
		height: 44upx;
		margin-left: -22upx;
	}

	.visit_item_content_box {
		position: relative;
		width: 620upx;
		height: 190upx;
	}

	.visit_item_content_bg,
	.visit_item_content {
		position: absolute;
		width: 620upx;
		height: 190upx;
		background: #FFFFFF;
	}

	.visit_item_content_title {
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 28upx;
		color: #333333;
		width: 100%;
		padding: 0 30upx 0 45upx;
		margin-top: 20upx;
		width: 100%;
		box-sizing: border-box;
		position: relative;
	}

	.visit_item_content_title view:nth-child(2) {
		line-height: 36upx;
		padding: 0 12upx;
		font-size: 22upx;
		color: #049BFF;
		margin-left: 20upx;
		background: rgba(4, 155, 255, 0.1);
		border-radius: 4upx;
	}

	.visit_item_content_title view:nth-child(3){
		    line-height: 36rpx;
			padding: 0 12rpx;
			font-size: 25rpx;
			color: #080808;
			background: rgba(94, 102, 107, 0.1);
			border-radius: 4rpx;
			position: absolute;
			right: 20rpx;
	} 

	.visit_item_content_title image {
		width: 28upx;
		height: 28upx;
		margin-left: auto;
		position: absolute;
		right: 10upx;
		top: 0;
	}

	.visit_item_content_text {
		padding: 0 30upx 0 45upx;
		width: 100%;
		box-sizing: border-box;
		height: 78rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 28upx;
		color: #666666;
		margin: 4rpx 0;
	}
	.visit_item_content_text view{
		height:100%;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.visit_item_content_time {
		width: 100%;
		padding: 0 30upx 0 45upx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		font-size: 24upx;
		color: #9BA7B7;
	}

	.visit_item_content_time_icon {
		margin-left: auto;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.visit_item_content_time_icon image {
		width: 26upx;
		height: 26upx;
		margin-left: 26upx;
	}

	.phone_item {
		width: 100%;
		padding: 30upx;
		box-sizing: border-box;
		font-size: 30upx;
		border-bottom: 2upx solid #EEEEEE;
		color: #333333;
		display: flex;
		flex-direction: row;
		align-items: center;
		background: #FFFFFF;
	}

	.phone_item_name view:nth-child(2) {
		color: #9BA7B7;
		font-size: 28upx;
		margin-top: 10upx;
	}

	.phone_item image {
		width: 35upx;
		height: 39upx;
		margin-left: auto;
	}

	.phone_item:last-child,
	.work_item:last-child {
		border-bottom: 0upx solid #FFFFFF;
	}

	.position_bg1 {
		z-index: 999;
	}

	.active {
		border-bottom: 6upx solid #049BFF;
		color: #049BFF;
	}
</style>